<!-- 检测者列表 -->
<div class="layuimini-container layuimini-page-anim">
	<div class="layuimini-main">


		<div style="margin: 10px">
			<!-- 条件搜索  start-->
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-form-item">

					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" name="phone" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
						</div>
					</div>
					<!-- <div class="layui-inline">
						<div class="layui-input-inline">
							<select name="subStore" lay-filter="subStore">
								<option value="" selected>--请选择所属分店--</option>
								<option value="">老百姓湘雅总店</option>
								<option value="">杏仁堂龙塘分店</option>
							</select>
						</div>
					</div> -->

					<div class="layui-inline">
						<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
							 class="layui-icon"></i>查询</button>
						<button type="reset" id="reset" class="layui-btn layui-btn-normal"  lay-filter="data-search-btn"><i
							 class="layui-icon"></i>重置</button>
					</div>
				</div>
			</form>
			<!-- 条件搜索  end-->
		</div>


		<!-- 定义 id="toolbarDemo"  -->
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn" lay-event="add-patient"><i class="fa fa-pencil"></i> 新增检测者 </button>
				<!-- <button class="layui-btn" lay-event="select-test"> 选择检测项目 </button>
				<button class="layui-btn" lay-event="test-medical"> 新增检测 </button>
				<button class="layui-btn" lay-event="test-result"> 检测结果 </button>
				<button class="layui-btn" lay-event="test-report"> 检测报告单 </button>
				<button class="layui-btn" lay-event="history-list"> 历史记录 </button> -->
				<!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="batchDelete"> 批量删除 </button> -->
			</div>
		</script>

		<!-- 定义 id="currentTableBar" -->
		<script type="text/html" id="currentTableBar">
			<div class="layui-btn-group">
				<button type="button" class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
				<!-- <button type="button" class="layui-btn layui-btn-sm" lay-event="detail">查看</button> -->
				<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
			</div>
		</script>

		<!-- 表格：数据表格 -->
		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

	</div>
</div>

<style>
	.layui-table-cell {
		font-size: 14px;
		padding: 0 5px;
		height: auto;
		overflow: visible;
		text-overflow: inherit;
		white-space: normal;
		word-break: break-all;
	}
</style>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			element = layui.element,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;

		//渲染form表单
		form.render();

		//省市区
		layarea.render({
			elem: '#area-picker',
			//三级选择框每次选择时执行
			change: function(res) {
				//选择结果
				console.log(res);
			}
		});

		//对table进行初始化
		table.render({
			elem: '#currentTableId', //指定初始化的tableID
			url: 'http://localhost:8002/sccPatient', //请求地址,获取数据，后期将调用controller的接口，获得json数据
			toolbar: '#toolbarDemo', //引用上面定义的工具栏按钮
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [
				[ //字段，表头
					{
						field: 'patientId',
						type: "checkbox",
						width: 50
					},
					{
						field: 'name',
						title: '姓名',
						align: 'center'
					},
					{
						field: 'sex',
						title: '性别',
						sort: true,
						align: 'center',
						width: 80,
						templet: function(d) {
							return d.sex == 1 ? '男' : '女'
						}
					},
					{
						field: 'age',
						title: '年龄',
						sort: true,
						align: 'center',
						width: 80
					},
					{
						field: 'phone',
						title: '联系电话',
						align: 'center'
					},
					{
						field: 'custcmerCode',
						title: '会员号',
						align: 'center'
					},
					{
						field: 'weight',
						title: '身高/cm',
						align: 'center'
					},
					{
						field: 'height',
						title: '体重/kg',
						align: 'center'
					},
					
					// {
					// 	field: 'storeId',
					// 	title: '所属分店',
					// 	align: 'center'
					// },
					{
						field: 'countOfTest',
						title: '检查次数',
						align: "center",
						sort: true
					},
					{
						field: 'lastTestTime',
						title: '最后检测时间',
						align: 'center'
					},
					{
						title: '操作',
						minWidth: 200,
						toolbar: '#currentTableBar',
						align: "center"
					}
				]
			],
			page: true,
			limits: [5, 10, 15,20,25,30],
			limit: 5,
			skin: 'line'
		});


		// 监听搜索操作
		form.on('submit(data-search-btn)', function(data) { //当点击搜索按钮时，执行function()函数，data是指form表单中的所有数据
			console.log(data);
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			layer.alert(result, { //弹出层，显示result（转换后的json字符串）
				title: '最终的搜索信息' //弹出层的标题
			});

			//执行搜索重载
			table.reload('currentTableId', {
				page: {
					curr: 1
				}, //当前行是第一行
				where: {
					searchParams: result
				} //搜索条件
			}, 'data');

			return false;
		});
		form.on('submit(data-reset-btn)', function(data) { //当点击搜索按钮时，执行function()函数，data是指form表单中的所有数据
			
		
			return false;
		});


		/**
		 * toolbar事件监听
		 */
		table.on('toolbar(currentTableFilter)', function(obj) {
			if (obj.event === 'add-patient') {
				var content = miniPage.getHrefContent('page/table/add-patient.html');
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '新增检测者',
					type: 1,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					area: ['60%', '70%'],
					offset: ['15%', '20%'],
					content: content
				});
				return false;
			// } else if (obj.event === 'test-medical') {
			// 	var content = miniPage.getHrefContent('page/table/test-medical.html');
			// 	var openWH = miniPage.getOpenWidthHeight();
			// 	var index = layer.open({
			// 		title: '新增检测',
			// 		type: 1,
			// 		shade: 0.2,
			// 		maxmin: false,
			// 		shadeClose: true,
			// 		area: ['70%', '80%'],
			// 		offset: ['10%', '15%'],
			// 		content: content
			// 	});
			// 	return false;

			// } else if (obj.event === 'select-test') {
			// 	var content = miniPage.getHrefContent('page/table/select-test.html');
			// 	var openWH = miniPage.getOpenWidthHeight();
			// 	var index = layer.open({
			// 		title: '选择检测项目',
			// 		type: 1,
			// 		shade: 0.2,
			// 		maxmin: false,
			// 		shadeClose: true,
			// 		area: ['50%', '70%'],
			// 		offset: ['15%', '25%'],
			// 		content: content
			// 	});
			// 	return false;

			// } else if (obj.event === 'medical-list') {
			// 	var content = miniPage.getHrefContent('page/table/medical-list.html');
			// 	var openWH = miniPage.getOpenWidthHeight();
			// 	var index = layer.open({
			// 		title: '历史记录',
			// 		type: 1,
			// 		shade: 0.2,
			// 		maxmin: false,
			// 		shadeClose: true,
			// 		area: ['80%', '80%'],
			// 		offset: ['10%', '10%'],
			// 		content: content
			// 	});
			// 	return false;

			// } else if (obj.event === 'test-result') {
			// 	var content = miniPage.getHrefContent('page/table/test-result.html');
			// 	var openWH = miniPage.getOpenWidthHeight();
			// 	var index = layer.open({
			// 		title: '检测结果数据',
			// 		type: 1,
			// 		shade: 0.2,
			// 		maxmin: false,
			// 		shadeClose: true,
			// 		area: ['80%', '80%'],
			// 		offset: ['10%', '10%'],
			// 		content: content
			// 	});
			// 	return false;

			// } else if (obj.event === 'test-report') {
			// 	var content = miniPage.getHrefContent('page/table/test-report.html');
			// 	var openWH = miniPage.getOpenWidthHeight();
			// 	var index = layer.open({
			// 		title: '检测报告单',
			// 		type: 1,
			// 		shade: 0.2,
			// 		maxmin: false,
			// 		shadeClose: true,
			// 		area: ['80%', '80%'],
			// 		offset: ['10%', '10%'],
			// 		content: content
			// 	});
				// return false;

			}
		});

		//监听表格复选框选择
		table.on('checkbox(currentTableFilter)', function(obj) {
			console.log(obj)
		});



		//初始化职业数据

		//监 听操作列下面的编辑和删除
		table.on('tool(currentTableFilter)', function(obj) {
			//获得当前行数据
			var data = obj.data;

			if (obj.event === 'edit') { //编辑事件
				var content = miniPage.getHrefContent('page/table/edit-patient.html');
				var openWH = miniPage.getOpenWidthHeight();
				//弹出层
				var index = layer.open({
					title: '编辑用户',
					type: 1,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					area: ['60%', '70%'], //弹出窗尺寸，设置最小尺寸
					offset: ['15%', '20%'], //弹出窗x,y位置
					content: content, //弹出层内容
					success: function(layero, index) {
						console.log(data);
						//编辑页面绑定数据
						$(layero).find("input[name='patientId']").val(data.patientId);
						$(layero).find("input[name='phone']").val(data.phone);
						//性别
						$(layero).find("input[name='sex'][value='0']").attr("checked", data.sex == 0 ? true : false);
						$(layero).find("input[name='sex'][value='1']").attr("checked", data.sex == 1 ? true : false);
						$(layero).find("input[name='age']").val(data.age);
						$(layero).find("input[name='name']").val(data.name);
						$(layero).find("input[name='idCard']").val(data.idCard);
						form.render(); //更新全部
					}
				});
				return false;

			} else if (obj.event === 'delete') { //删除
				//弹出框
				layer.confirm('真的删除行么', function(index) {
					console.log(data.patientId);

					//TODO:请求后端接口进行删除操作
					$.ajax({
						url: 'http://localhost:8002/sccPatient',
						type: 'delete',
						data : {"_method": "delete", "id": data.patientId},
						success: function(result) {
							console.log(result);
							//关闭确认消息框
							layer.close(index);
							//TODO:刷新table,重新加载
							table.reload('currentTableId');
						},
						error: function(result) {
							console.log(result);
						}
					});

				});
			}
		});

	});
</script>
